<!--
 * @Author: muuzi@163.com muuzi@163.com
 * @Date: 2020-06-09 10:21:36
 * @LastEditors: muuzi@163.com muuzi@163.com
 * @LastEditTime: 2024-10-29 23:44:34
 * @FilePath: /my-vue3-project/src/pages/integrals/flow.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<view class="container">
		<view class="masthead d-flex flex-column just-content-center align-items-center">
			<view class="point-num">{{ pointNum }}</view>
			<view class="font-size-sm text-color-primary">查看积分规则</view>
		</view>
		<view>
			<up-list
			@scrolltolower="scrolltolower"
		>
			<up-list-item
				v-for="(item, index) in pointsFlow"
				:key="index"
				class="item"
			>
				<view class="item-box">
					<view class="flex-fill d-flex flex-column">
						<view class="font-size-lg text-color-base mb-10">{{ item.reason }}</view>
						<view class="font-size-base text-color-assist">{{ item.createdAt }}</view>
					</view>
					<view class="d-flex flex-column align-items-center">
						<view class="font-size-lg text-color-base font-weight-bold">
							{{ item.changeType == 1 ? '+' : '-' }}{{ item.changeNum }}
						</view>
						<view class="font-size-sm text-color-assist">{{ item.sellerName }}</view>
					</view>
				</view>
			</up-list-item>
		</up-list>
		
		</view>
	</view>
</template>

<script>
	// import listCell from '@/components/list-cell/list-cell'
	//import pointsFlow from '@/api/points-flow'
	
	export default {
		components: {
			// listCell
		},
		data() {
			return {
				pointNum: 0,
				pointsFlow: []
			}
		},
		onLoad() {
			//const member = this.$store.state.member
			//this.pointNum = member.pointNum
			this.pointsFlow = [
				{
					"happenedDate": "2020-05-11",
					"sourceType": 5,
					"sellerName": "茶",
					"changeNum": 1,
					"changeType": 1,
					"reason": "积分签到奖励",
					"createdAt": "2020-05-11 00:17:47",
					"id": 1
				},{
					"happenedDate": "2020-05-11",
					"sourceType": 5,
					"sellerName": "茶",
					"changeNum": 1,
					"changeType": 1,
					"reason": "积分签到奖励",
					"createdAt": "2020-05-11 00:17:47",
					"id": 1
				},{
					"happenedDate": "2020-05-11",
					"sourceType": 5,
					"sellerName": "茶",
					"changeNum": 1,
					"changeType": 1,
					"reason": "积分签到奖励",
					"createdAt": "2020-05-11 00:17:47",
					"id": 1
				},
			]
		}
	}
</script>

<style lang="scss" scoped>
	.masthead {
		height: 300rpx;
		position: relative;
		
		.point-num {
			font-size: 72rpx;
			//color: $text-color-base;
		}
		
		&::after {
			content: '';
			position: absolute;
			border-bottom: 2rpx solid #e2e2e2;
			transform: scaleY(0.8);
			bottom: 0;
			right: 0;
			left: 0;
		}
	}
	
	// /deep/.tui-list-cell:after{
	// 	transform: scaleY(0.8);
	// }
	.item{
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx 20rpx;
	}
	.item-box{
		width: 100%;
		background: #fff;
		
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
	}
</style>
